<template>
    <div>
        <sc-dialog title="批量授权学生" v-model="propValue" custom-class="addSchoolPopup" width="70vw" top="50px" @close="$emit('input', false)" @open="_open">
            <div class="dialog-content" style="padding: 20px">
                <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
                <el-table :data="tableData" border highlight-current-row style="width: 100%; margin-top: 20px">
                    <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="_close">取 消</el-button>
                <el-button size="mini" type="primary" @click="handleResolve">确认授权</el-button>
            </span>
        </sc-dialog>

        <!-- 弹窗 -->
        <el-dialog title="不存在学生" :visible.sync="centerDialogVisible" width="30%" center>
            <ul class="infinite-list" style="overflow: auto; display: flex">
                <li v-for="(item, index) in cData" :key="index" style="margin-right: 15px">
                    <el-link @click="handleStudentName(item)" type="warning" size="medium">{{ item }}</el-link>
                </li>
            </ul>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCopyStudentNames()" type="primary">复 制</el-button>
                <el-button @click="centerDialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import UploadExcelComponent from "admin/components/UploadExcel/index.vue";

export default {
    name: "UploadExcel",
    components: { UploadExcelComponent },
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        rowData: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            tableData: [],
            tableHeader: [],
            studentNames: [],
            cData: [],
            centerDialogVisible: false,
        };
    },
    computed: {
        propValue: {
            get() {
                return this.value;
            },
            set(nval) {
                this.$emit("input", nval);
            },
        },
    },
    methods: {
        //关闭弹窗
        _close() {
            this.$emit("input", false);
        },
        _open() {
            this.tableData = [];
            this.tableHeader = [];
            this.studentNames = [];
            this.cData = [];
        },
        beforeUpload(file) {
            const isLt1M = file.size / 1024 / 1024 < 1;

            if (isLt1M) {
                return true;
            }

            this.$message({
                message: "请不要上传大于 1m 的文件。",
                type: "warning",
            });
            return false;
        },
        handleSuccess(sheets) {
            let students = sheets.reduce((pre, item) => {
                pre = pre.concat(...item.results);
                return pre;
            }, []);

            students = students.filter((v) => v["缴费情况"] && v["缴费情况"] == "已缴费");
            this.studentNames = students.map((v) => {
                return v["学生姓名"];
            });

            this.tableData = students;
            this.tableHeader = sheets[0].header;
        },
        // 学生批量授权
        async handleResolve() {
            const loading = this.$scLoading("正在授权...");
            let { data, code, msg } = await this.$api.schoolConfig.schoolList.batchAccessMessageAuthorize({
                accessControl: true,
                studentNames: this.studentNames,
                schoolId: this.rowData.id,
            });
            if (code === 200) {
                loading.close();
                this.centerDialogVisible = true;
                this.cData = data;
                this.$message.success("批量学生消息授权成功！" || msg);
                this.$emit("input", false);
            }
        },
        // 剪切复制
        handleStudentName(name) {
            this.$Clipboard({
                text: name,
            })
                .then(() => {
                    this.$message.success(`复制成功${name}`);
                })
                .catch(() => {
                    this.$message.error("复制失败");
                });
        },
        handleCopyStudentNames() {
            const str = `${this.rowData.schoolName}\r\n${this.cData.join("\r\n")}`;
            this.$Clipboard({
                text: str,
            })
                .then(() => {
                    this.$message.success(`复制成功`);
                })
                .catch(() => {
                    this.$message.error("复制失败");
                });
        },
    },
};
</script>
